<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>历史授权</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            background-color: #f7f7f7;
        }

        .div_equipment {
            background-color: #fff;
            height: 91px;
            display: -webkit-box;
        }

        .div_equipment_left {
            width: 76px;
            text-align: center;
            height: 46px;
            position: relative;

            /*margin-top: 15px;*/
        }

        .div_equipment_left_type {
            width: 46px;
            height: 46px;
            border-radius: 23px;
            box-shadow: 0 0 2px 2px rgba(199, 199, 199, 0.28);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 16px 22px;
            margin-top: 15px;
            margin-left: 16px;
        }


        .div_equipment_middle {
            -webkit-box-flex: 1.0;
            margin-left: 0px;
            margin-top: 15px;
        }

        .div_equipment_style1 {
            font-size: 13px;
            color: #999999;
            margin-top: 6px;
        }

        /*设备名称的style*/
        .div_equipment_style2 {
            margin-top: 0px;
            font-size: 15px;
        }

        .dropDown li {
            height: 30px;
            font-size: 13px;
            color: #fff;
            line-height: 30px;
            display: -webkit-box;
            padding: 10px;
        }

    </style>
</head>


<body>

<div id="list-item-temp" class="div_1" style="display:none">
    <div style="height:15px"></div>
    <div class="div_equipment">
        <div class="div_equipment_left">
            <!--设备类型-->
            <div class="div_equipment_left_type"></div>
        </div>
        <div class="div_equipment_middle">
            <!--设备名称-->
            <div class="div_equipment_middle_device_name div_equipment_style2">
            </div>
            <!--上线时间-->
            <div class="div_equipment_middle_time div_equipment_style1"></div>
            <!--下线时间-->
            <div class="div_equipment_middle_mac div_equipment_style1"></div>
        </div>
    </div>
</div>

<ul id="list-unhandle"></ul>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/md5.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    //总单数
    var mCpCount;
    //item的下标
    var mIndex;
    //用户id
    var mUserId;
    //    关键字
    var keyword = "history";

    var mListView;
    //列表数据
    var mLVDatas;
    //是否加载更多
    var mIsLoadMore = false;
    //第几页
    var mPageNum = 1;
    //每页数据条数
    var mPageSize = 10;

    //    测试数据
    var testData = [

        {
            device_name: '联想1',
            device_type_id: 2,
            create_time: '2017.1.1 12:00:01',
            end_time: '2017.1.2 13:39:24'
        }, {
            device_name: '联想2',
            device_type_id: 1,
            create_time: '2017.1.1 12:00:01',
            end_time: '2017.1.2 13:39:24'
        }, {
            device_name: '联想3',
            device_type_id: 3,
            create_time: '2017.1.1 12:00:01',
            end_time: '2017.1.2 13:39:24'
        }, {
            device_name: '联想4',
            device_type_id: 4,
            create_time: '2017.1.1 12:00:01',
            end_time: '2017.1.2 13:39:24'
        }, {
            device_name: '联想5',
            device_type_id: 2,
            create_time: '2017.1.1 12:00:01',
            end_time: '2017.1.2 13:39:24'
        },        {
            device_name: '联想6',
            device_type_id: 2,
            create_time: '2017.1.1 12:00:01',
            end_time: '2017.1.2 13:39:24'
        },        {
            device_name: '联想7',
            device_type_id: 2,
            create_time: '2017.1.1 12:00:01',
            end_time: '2017.1.2 13:39:24'
        },        {
            device_name: '联想8',
            device_type_id: 2,
            create_time: '2017.1.1 12:00:01',
            end_time: '2017.1.2 13:39:24'
        },        {
            device_name: '联想9',
            device_type_id: 2,
            create_time: '2017.1.1 12:00:01',
            end_time: '2017.1.2 13:39:24'
        },        {
            device_name: '联想10',
            device_type_id: 2,
            create_time: '2017.1.1 12:00:01',
            end_time: '2017.1.2 13:39:24'
        }
    ];




    apiready = function () {
        initData();
        initView();
        requestList(mPageSize, mPageNum);
    };

    function initData() {
//        用户ID
        mUserId = $api.getStorage(common.appKey.userId);

    }

    function initView() {
        mListView = document.getElementById('list-unhandle');
        listenerScrollBottom();
        setRemoveJZListener();
    }

    /**
     * 显示列表
     * @param{Object} datas - 用户数据数组json
     */
    function showListView(datas) {
        if (datas == null || datas.length < 1) {
            return;
        }
        var index = 0;
        var item = '';
        //判断是否是加载更多。是，mLVDatas添加数据。否，mLVDatas清空数据，mListView清空html
        if (mIsLoadMore) {
            for (index in datas) {
                mLVDatas.push(datas[index]);
            }
        } else {
            mListView.innerHTML = '';
            mLVDatas = null;
            mLVDatas = datas;
        }
        index = 0;
        //展示listview
        for (index in datas) {
            item = createLVItem(datas[index]);
            mListView.appendChild(item);
        }
        if (mIsLoadMore) {
            mIsLoadMore = false;
            hideLoadMoreView();
        } else {
            api.hideProgress();
        }
    }

    /**
     * 创建列表的item
     * @param {Object} data - 用户信息的object对象
     */
    function createLVItem(data) {
        var li = document.createElement('li');
        li.innerHTML = document.getElementById('list-item-temp').innerHTML;
        //设备类型
        var msg1 = li.getElementsByClassName('div_equipment_left_type')[0];
        //设备名称
        var msg2 = li.getElementsByClassName('div_equipment_middle_device_name')[0];
        //上线时间
        var msg3 = li.getElementsByClassName('div_equipment_middle_time')[0];
        //下线时间
        var msg4 = li.getElementsByClassName('div_equipment_middle_mac')[0];


        //            设备图片的选择
        switch (data.device_type_id) {
            case 1:
                msg1.style.backgroundImage = 'url(../image/phone.png)';
                msg1.style.backgroundSize = '16px 22px';
                break;
            case 2:
                msg1.style.backgroundImage = 'url(../image/computer.png)';
                msg1.style.backgroundSize = '24.5px 22.5px';
                break;
            case 3:
                msg1.style.backgroundImage = 'url(../image/ipad.png)';
                msg1.style.backgroundSize = '24.5px 19.5px';
                break;
            case 4:
                msg1.style.backgroundImage = 'url(../image/computer.png)';
                msg1.style.backgroundSize = '24.5px 22.5px';
                break;
            default:

        }


        if(data.device_name === ''){
            msg2.innerText = '未命名';
        }else if(data.device_name === undefined){
            msg2.innerText = '未命名';
        }else if(data.device_name === null){
            msg2.innerText = '未命名';
        }else {
            msg2.innerText = data.device_name;
        }

        if(data.create_time === ''){
            msg3.innerText = '授权时间:';
        }else if(data.create_time === undefined){
            msg3.innerText = '授权时间:';
        }else if(data.create_time === null){
            msg3.innerText = '授权时间:';
        }else {
            msg3.innerText = '授权时间:' + data.create_time;

        }

        if(data.end_time === ''){
            msg4.innerText = '下线时间:';
        }else if(data.end_time === undefined){
            msg4.innerText = '下线时间:';
        }else if(data.end_time === null){
            msg4.innerText = '下线时间:';
        }else {
            msg4.innerText = '下线时间:' + data.end_time;

        }



        return li;
    }

    /**
     * 移除 item
     * @param{Number} index - 要移除的item的下标
     */
    function removeLVItem(index) {
        mListView.removeChild(mListView.getElementsByTagName('li')[index]);
        mLVDatas.splice(index, 1);
        triggerCpCountListener(--mCpCount);
    }

    /**
     * 打开详情页
     */
    function openDetailsW(cpid) {
        console.log('openDetailsW--id=' + cpid);
        api.openWin({
            name: 'order_details',
            url: './order_details.html',
            pageParam: {
                'id': cpid,
                'tag': 1
            }
        });
    }

    /**
     * 打开评价页面
     */
    function openEvPg(cpid) {
        console.log('openEvPg--id=' + cpid);
        api.openWin({
            name: 'evaluate',
            url: './evaluate.html',
            pageParam: {
                'id': cpid
            }
        });
    }

    /**
     * 隐藏“加载更多”的view
     */
    function hideLoadMoreView() {
        var loadViews = document.getElementsByClassName('load-more-content');
        if (loadViews.length != 0) {
            document.getElementsByTagName('body')[0].removeChild(loadViews[0]);
        }
    }

    /**
     * 展示“加载更多”的view
     */
    function showLoadMoreView() {
        var loadView = document.createElement('div');
        loadView.className = 'load-more-content';
        loadView.innerHTML = '<img src=".../image/icon_loading.png" /><span>加载中</span>';
        document.getElementsByTagName('body')[0].appendChild(loadView);
    }

    /**
     * 加载更多失败处理
     */
    function loadMoreFailure(msg) {
        msg = msg || '加载更多失败！'
        //还原页数（第几页）
        mPageNum--;
        mIsLoadMore = false;
        hideLoadMoreView();
        api.toast({
            msg: msg
        });
    }

    //设置“滑动到底部”事件监听
    function listenerScrollBottom() {
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function (ret, err) {
            console.log();
            //判断列表是否已经到达屏幕底部，是，就代表可以加载更多；否，就不让加载更多。
            if (mListView.offsetHeight >= api.frameHeight && !mIsLoadMore) {
                mIsLoadMore = true;
                showLoadMoreView();
                requestList(mPageSize, ++mPageNum)
            }
        });
    }


    /**
     * 服务器请求：获取接障数据
     * @param{int} pgS - 每页的数据条数
     * @param{int} pgN - 页数
     */
    function requestList(pgS, pgN) {
        var tag = 'requestList_more';
        if (!mIsLoadMore) {
            api.showProgress({});
            api.cancelAjax({
                tag: tag
            });
            tag = null;
        }

        var fwq = $api.getStorage(common.appKey.appFWQ);
        var parame = {
            userid: mUserId,
            keyword: keyword,
            page: mPageNum,
            rows: mPageSize
        }

        var parames = common.getJSONParame(common.keyword.url_historyList, JSON.stringify(parame));
        common.getConsole('在线设备列表接口', JSON.stringify(parame) + "..fwq.." + fwq);

//        请求后台
        common.ajax(fwq, parames, 8, function (ret, err) {
            common.getApiHideProgress()
            if (ret) {
                common.getConsole('在线设备列表请求结果', JSON.stringify(ret));

                var count = 0;
                //这里滑倒最下面的时候会报错
                var array = ret.list;
                if(array != undefined){
                    count = array.length;
                }
                mCpCount = count;
                if (!mIsLoadMore) {
                    triggerCpCountListener(mCpCount);
                }

                if (ret.code == 1) {
                    mList = ret.list;
//                    真实数据
                    showListView(mList);
//                    测试数据
//                    showListView(testData);

                } else {
                    if (!mIsLoadMore) {
                        api.hideProgress();
                        api.toast({
                            msg: ret.msg
                        });
                    } else {
                        //还原页数（第几页）
                        loadMoreFailure('没有更多数据！');
                    }
                }
            } else {
                common.getConsole('在线设备列表请求失败', JSON.stringify(err));
                common.getShowViewError(err.code, err.msg);
            }
        })

    }

    /**
     * 设置“移除item”的监听
     */
    function setRemoveJZListener() {
        api.addEventListener({
            name: 'RemoveJZListener'
        }, function (ret, err) {
            if (ret) {
                removeLVItem(mIndex);
            } else {
                MyCom.errorTip(1);
            }
        });
    }

    /**
     * 触发“设置故障总单的view”的监听
     * @param{Number} msg - 总单数
     */
    function triggerCpCountListener(msg) {
        api.sendEvent({
            name: 'CpCountListener',
            extra: {
                'msg': msg
            }
        });
    }
</script>
</html>
